<template>
  <div class="app-container">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="7"><el-card></el-card></el-col>
        <el-col :span="17">
          <div class="power-box">
            <div class="power-avow">
              <img src="../../assets/images/power-bg.png" alt="" />
              <div class="content">
                <div class="title">
                  <a href="" class="lv-box" target="_blank">
                    <img src="../../assets/images/power-level.png" alt="" />
                    <span class="level">0</span>
                  </a>
                  <a href="" class="tag">领奖</a>
                </div>
                <div class="desc">
                  <span class="num">总分</span>
                  <span class="number">0</span>
                  <span class="num">分</span>
                  <i class="el-icon-question"></i>
                  <a href="">
                    <span class="num">总分</span>
                    <span class="number">0</span>
                    <span class="num">分</span>
                  </a>
                  <i class="el-icon-question"></i>
                </div>
              </div>
              <div class="right">
                <div class="top">最近更新时间 2022-07-01</div>
                <div class="bottom">
                  <a href="" class="span-tag">查看原力分说明</a>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 创作中心
export default {}
</script>

<style lang="less" scoped>
.app-container {
  background: #f5f5f5;
  padding-top: 20px;
}
.power-box {
  padding: 0 24px 24px;
  margin-bottom: 24px;
  background: #fff;
  box-shadow: 0px 0px 10px #b2b2b2b2;
  border-radius: 2px;
  .power-avow {
    width: 100%;
    height: 99px;
    display: flex;
    align-items: flex-end;
  }
  .power-avow > img {
    width: 139px;
    height: 88px;
    margin-right: 16px;
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 88px;
    .title {
      display: flex;
      align-items: center;
      img {
        height: 22px;
        vertical-align: -4px;
      }
      .level {
        margin-left: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #222226;
        line-height: 22px;
      }
      .tag {
        width: 38px;
        height: 20px;
        display: inline-block;
        line-height: 20px;
        text-align: center;
        background: #f0f0f5;
        border-radius: 2px;
        margin-left: 16px;
        font-size: 12px;
        font-weight: 400;
        color: #555666;
      }
    }
    .desc{
      display: flex;
    align-items: center;
    .num{
          font-size: 14px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: 400;
    color: #777888;
    }
    .number{
      font-size: 24px;
    font-family: PingFangSC-Medium,PingFang SC;
    color: #222226;
    margin-right: 4px;
    font-size: 18px;
    margin-left: 12px;
    }
    i{
      margin-left: 5px;
    }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 88px;
    .top {
      font-size: 14px;
      font-weight: 400;
      color: #999aaa;
    }
    .bottom {
      display: flex;
      .span-tag {
        width: 118px;
        height: 24px;
        background: #f0f0f5;
        border-radius: 12px;
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        font-weight: 400;
        color: #555666;
      }
    }
  }
}
</style>
